<template>
  <el-dialog
    v-model="state.dialogVisible"
    :append-to-body="true"
    :before-close="close"
    :close-on-click-modal="true"
    :close-on-press-escape="true"
    :destroy-on-close="true"
    top="5vh"
    :modal="model"
    :title="state.dialogTitle"
    :width="width"
  >
    <el-form
      ref="formRef"
      label-width="100px"
      :model="state.formData"
      :rules="state.formRules"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="参数前缀" prop="paramPrefix">
            <el-input
              v-model="state.formData.paramPrefix"
              placeholder="请输入参数描述"
              :maxlength="32"
              :show-word-limit="true"
              type="text"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="参数名称" prop="paramName">
            <el-input
              v-model="state.formData.paramName"
              placeholder="请输入参数名称"
              :maxlength="32"
              :show-word-limit="true"
              type="text"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="参数值" prop="paramValue">
            <el-input
              v-model="state.formData.paramValue"
              placeholder="请输入参数值"
              :show-word-limit="true"
              type="text"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button icon="circle-close" type="warning" @click="close">
        取消
      </el-button>
      <el-button
        :disabled="state.readonly"
        icon="circle-check"
        type="primary"
        @click="save"
      >
        确定
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup name="ConfigEdit">
import { useMessage } from "@/hooks/message";
import { addConfig, updateConfig } from "@/api/admin/system/config/";
import pinyin from "js-pinyin";

const props = defineProps({
  title: {
    type: String,
    default: "参数"
  },
  width: {
    type: String,
    default: "40%"
  },
  model: {
    type: Boolean,
    default: true
  }
});
const emits = defineEmits(["confirm"]);

const formRef = ref(null);
const paramTypeRef = ref(null);
const paramValRef = ref(null);
const paramValModeRef = ref(null);

const state = reactive({
  dialogTitle: props.title,
  dialogVisible: false,
  readonly: false,
  operationAdd: false,
  disabeldParamValAdd: false,
  formData: {
    id: "",
    paramName: "",
    paramPrefix: "",
    paramValue: ""
  },
  formRules: {
    paramPrefix: [
      { required: true, message: "参数前缀不能为空", trigger: "blur" }
    ],
    paramName: [
      { required: true, message: "参数名称不能为空", trigger: "blur" }
    ],
    paramValue: [{ required: true, message: "参数值不能为空", trigger: "blur" }]
  }
});

const show = (row, readonly) => {
  if (readonly) {
    state.dialogTitle = `${props.title}详情`;
    state.readonly = readonly;
  } else {
    state.readonly = false;
  }
  if (row && row.id) {
    state.dialogTitle = `修改${props.title}`;
    state.formData.id = row.id;
    state.formData.paramPrefix = row.paramPrefix;
    state.formData.paramName = row.paramName;
    state.formData.paramValue = row.paramValue;
  } else {
    state.operationAdd = true;
    state.dialogTitle = `新增${props.title}`;
  }
  console.log("show", state.formData);
  state.dialogVisible = true;
};

const close = () => {
  formRef.value.resetFields();
  state.readonly = false;
  state.operationAdd = false;
  state.formData = {
    id: "",
    paramName: "",
    paramPrefix: "",
    paramValue: ""
  };
  state.dialogVisible = false;
};

const save = () => {
  formRef.value.validate(async valid => {
    if (valid) {
      if (state.operationAdd) {
        addConfig(state.formData).then(res => {
          if (res.code === 200) {
            useMessage().success(res.msg);
            emits("confirm", {});
            close();
          } else {
            useMessage().error(res.msg);
          }
        });
      } else {
        updateConfig(state.formData).then(res => {
          if (res.code === 200) {
            useMessage().success(res.msg);
            emits("confirm", {});
            close();
          } else {
            useMessage().error(res.msg);
          }
        });
      }
    }
  });
};

defineExpose({
  show,
  close,
  save
});
</script>

<style lang="scss" scoped></style>
